<!--
 * @Author       : wfl
 * @LastEditors  : wfl
 * @description  :
 * @updateInfo   :
 * @Date         : 2023-06-01 09:27:30
 * @LastEditTime : 2023-12-15 10:48:03
-->
<script lang="ts" setup name="IkTree">
import { ElTree } from 'element-plus'
import { Search } from '@element-plus/icons-vue'

defineProps({
  showSearch: {
    type: Boolean,
    default: true
  }
})

const filterText = ref('')
const treeRef = ref<InstanceType<typeof ElTree>>()
watch(
  () => filterText.value,
  val => {
    treeRef.value?.filter(val)
  }
)
defineExpose({ tree: treeRef, filterText })
// const ctx = getCurrentInstance()
// const insetHeight = computed(() => `calc(100% - var(--el-component-size, 40px) - ${ctx?.slots.inset ? '40px' : 0})`)
</script>

<template>
  <slot name="inset"></slot>
  <el-input
    v-if="showSearch"
    v-model.trim="filterText"
    class="mt-2 mb-2 w-50"
    placeholder="请输入筛选条件"
    :suffix-icon="Search"
    clearable
  />
  <ElTree
    ref="treeRef"
    v-bind="$attrs"
    class="ik-tree"
  >
    <!-- $slots.default?.length 用于判断默认插槽是否存在 -->
    <template v-if="$slots.default" #default="{ data }">
      <slot :data="data"></slot>
    </template>
  </ElTree>
</template>

<style lang="scss" scoped>
.ik-tree.el-tree{
  color: var(--ik-header-menu-color);
  // height: v-bind(insetHeight);
  overflow: auto;
  flex: 1;

  :deep(.el-tree-node.is-expanded.is-focusable){
    &>.el-tree-node__content{
      color: var(--ik-text-color);
    }

    .is-current > .el-tree-node__content{
      color: var(--ik-header-menu-active-color);
      background-color: var(--ik-header-menu-active-bg);
    }
  }

}
</style>
